<template>
  <div class="config-orgManage-list">
    <div class="fr ac mb-20">
      <h2 class="title f1">医院信息</h2>
      <div class="f-14 a link" @click="$router.push('/config/orgManage/hospital')">创建<i class="el-icon-arrow-right b ml-5"></i></div>
      <a class="f-14 a link ml-20" :href="`/api/hospital/batchexport?userid=${$store.state.user.userid}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
    </div>
    <div class="fr ac search-bar mb-20">
      <div class="fr ac item">
        <div class="label f-14">省市</div>
        <el-input v-model="hospital.params.provincecityname"/>
      </div>
      <div class="fr ac item">
        <div class="label f-14">医院名称</div>
        <el-input v-model="hospital.params.hospitalname"/>
      </div>
      <div class="fr ac item">
        <div class="label f-14">等级</div>
        <el-select v-model="hospital.params.grade">
          <el-option :value="1" label="二甲"/>
          <el-option :value="2" label="三甲"/>
          <el-option :value="3" label="三乙"/>
        </el-select>
      </div>
      <div class="fr ac item">
        <div class="label f-14">发热门诊</div>
        <el-select v-model="hospital.params.feverclinic">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="getList('hospital', 1)">搜索</el-button>
    </div>
    <div class="list" v-loading="hospital.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <table>
        <thead>
        <th colspan="2">省市</th>
        <th colspan="2">区县</th>
        <th colspan="4">医院名称</th>
        <th colspan="2">等级</th>
        <th colspan="3">单位电话</th>
        <th colspan="2">联系人</th>
        <th colspan="3">联系人电话</th>
        <th colspan="3">是否有发热门诊</th>
        <th colspan="2">病床</th>
        <th colspan="3">操作</th>
        </thead>
        <tbody>
        <tr v-for="item in hospital.list" :key="item.hospid">
          <td colspan="2">{{item.provincecityname}}</td>
          <td colspan="2">{{item.county}}</td>
          <td colspan="4">{{item.hospitalname}}</td>
          <td colspan="2">{{item.grade | grade}}</td>
          <td colspan="3">{{item.workphone}}</td>
          <td colspan="2">{{item.contacts}}</td>
          <td colspan="3">{{item.contactphone}}</td>
          <td colspan="3">{{item.feverclinic | whether}}</td>
          <td colspan="2">{{item.hospitalbed}}</td>
          <td colspan="3">
            <span @click="$router.push(`/config/orgManage/hospital/${item.hospid}`)">编辑</span>
            <span @click="remove('hospital', item)">删除</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-30 page">
      <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :disabled="hospital.loading" :pager-count="5" :page-size="5" :total="hospital.total" :current-page="hospital.current" @current-change="getList('hospital', $event)"/>
    </div>

    <div class="fr ac mb-20 mt-30">
      <h2 class="title f1">医疗机关信息</h2>
      <div class="f-14 a link" @click="$router.push('/config/orgManage/medical')">创建<i class="el-icon-arrow-right b ml-5"></i></div>
      <a class="f-14 a link ml-20" :href="`/api/medical/batchexport?userid=${$store.state.user.userid}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
    </div>
    <div class="fr ac search-bar mb-20">
      <div class="fr ac item">
        <div class="label f-14">省市</div>
        <el-input v-model="medical.params.provincecityname"/>
      </div>
      <div class="fr ac item">
        <div class="label f-14">机关名称</div>
        <el-input v-model="medical.params.officename"/>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="getList('medical', 1)">搜索</el-button>
    </div>
    <div class="list" v-loading="medical.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <table>
        <thead>
        <th colspan="2">省市</th>
        <th colspan="2">区县</th>
        <th colspan="3">机关名称</th>
        <th colspan="4">地址</th>
        <th colspan="3">单位电话</th>
        <th colspan="2">负责人</th>
        <th colspan="3">负责人电话</th>
        <th colspan="3">操作</th>
        </thead>
        <tbody>
        <tr v-for="item in medical.list" :key="item.medicalid">
          <td colspan="2">{{item.provincecityname}}</td>
          <td colspan="2">{{item.county}}</td>
          <td colspan="3">{{item.officename}}</td>
          <td colspan="4">{{item.address}}</td>
          <td colspan="3">{{item.workphone}}</td>
          <td colspan="2">{{item.personincharge}}</td>
          <td colspan="3">{{item.contactphone}}</td>
          <td colspan="3">
            <span @click="$router.push(`/config/orgManage/medical/${item.medicalid}`)">编辑</span>
            <span @click="remove('medical', item)">删除</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-30 page">
      <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :disabled="medical.loading" :pager-count="5" :page-size="5" :total="medical.total" :current-page="medical.current" @current-change="getList('medical', $event)"/>
    </div>
  </div>
</template>

<script>
  import list from '../../../filter/valueList'

  export default {
    name: 'config-orgManage-list',
    data () {
      return {
        hospital: { // 医院
          list: [],
          current: 1,
          total: 0,
          loading: false,
          params: {
            hospitalname: '',
            grade: '',
            feverclinic: '',
            provincecityname:''
          }
        },
        medical: { // 医疗机关
          list: [],
          current: 1,
          total: 0,
          loading: false,
          params: {
            officename: '',
            provincecityname: ''
          }
        }
      }
    },
    methods: {
      getList (type, current) {
        const { county } = this.$store.state.user
        const item = this[type]
        item.loading = true
        if (current) item.current = current
        this.$http(`/${type}/fuzzyquery/page`, { county, pagesize: 5, pagecurrent: item.current, ...item.params }).then(
          res => {
            const data = res.data[type]
            item.list = data.records
            item.total = data.total
            item.loading = false
          }
        )
      },
      remove (type, item) {
        let name = '', key = ''
        if (type === 'hospital') {
          name = item.hospitalname
          key = 'hospid'
        }
        if (type === 'medical') {
          name = item.officename
          key = 'medicalid'
        }
        this.$confirm(`你确定要删除 ${name} 吗？`, '提示', { closeOnClickModal: false, center: true, customClass: 'custom' }).then(
          () => {
            this[type].loading = true
            return this.$http(`/${type}/delete`, { [key]: item[key] })
          }
        ).then(() => {
          this.$notify({
            title: '成功',
            message: `删除成功`,
            type: 'success'
          })
          this.getList(type, 1)
        }).catch(() => {})
      }
    },
    created () {
      this.getList('hospital')
      this.getList('medical')
    },
    filters: {
      grade (value) {
        if (!value) return ''
        return list.grade.find(v => v.value === value).name
      }
    }
  }
</script>
